.top
    {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        margin: auto;
    }
    .top-left
    {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .top-left-title img
    {
        width: 150px;
        height: 70px;
        margin-right: 30px;
    }
    .top-left-list
    {
        padding: 0;
    }
    .top-left-list ul
    {
        display: flex;
        align-items: center;
        list-style-type: none;
        padding: 0;
    }
    .top-left-list li
    {
        padding: 0 18px 0 0; 
    }
    a
    {
        text-decoration: none;
        color: #6c757d;
    }
    .top-left-list a:hover
    {
        text-decoration: none;
        color: #fff;
    }   
    .sreach
    {
        border-radius: 5px;
        border: 1px solid #ced4da;
        display: flex;
        align-items: center;
        background-color: #fff;
        margin-left: 100px;
    }
    .sreach input
    {
        border: none;
        outline: none;
        padding: 10px 10px;
        width: 10vw;
        border-radius: 50%;
        margin-right: 100px;
    }
    .sreach img
    {
        width: 30px;
        height: 30px;
        background-color: #fff;
    }
    .sreach-right{
        display: flex;
        align-items: baseline;
        margin-left: 70px;
    }
    /* .top-right */
    /* { */
        /* padding: 10px 80px; */
        /* height: 40px; */
        /* width: 90px; */
        /* background-color: rgb(48, 161, 48); */
        /* display: flex;
        justify-content: flex-end;
        border-radius: 10%;
        font-size: 16px;
        margin-left: -20px; */
        /* color: black; */
    /* } */
    .news
    {
        padding: 10px 10px;
    }
    .news a:hover
    {
        text-decoration: none;
        color: #fff;
    } 
    .puton
    {
        padding: 10px 10px;
        display: flex;
        margin-left: 10px;
    }
    .puton input{
        background-color: rgb(48, 161, 48);
        border-radius: 5%;
        height: 30px;
        margin-left: 15px;
    }
    
    .footer
    {
        background-color: #343a40;
        display: flex;
        justify-content: space-around;
        padding-bottom: 15px;
    }
    .footer-item
    {
        display: flex;
        flex-direction: column;
        color: #6c757d;
    }
    .footer-item img
    {
        width: 30px;
        height: 30px;
    }
    .footer-item text
    {
        padding: 5px 20px;
        margin-top: 5px;
    }
    .footer-item ul
    {
        padding: 0 20px;
        margin-bottom: 12px;
        margin: 0;
    }
    .footer-item li
    {
        padding: 5px 0px;
        margin: 0;
    }
    .footer-item a:hover
    {
        text-decoration: underline;
        color: #6c757d;
    }
    .footer-item-LR
    {
        display: flex;  
    }
    .footer-item-LR p
    {
        margin: 4px 0;
    }
    .footer-item-L
    {
        display: flex;
        flex-direction: column;
        color: red;
    }
    .footer-item-R
    {
        display: flex;
        flex-direction: column;
        color: red;
        margin: 0 0 0 8px;
    }
    .bottom
    {
        background-color: #343a40;
        padding: 16px 10px;

    }
    .bottom-item
    {
        display: flex;
        justify-content: space-between;
        color: #6c757d;  
    }
    .bottom-item a:hover
    {
        text-decoration: underline;
        color: #6c757d;
    }